<!DOCTYPE html>
<html lang="zh">
<head>
    <title>单表示例Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../plugins/elementui/2.10.1/index.min.css" type="text/css">
    <link rel="stylesheet" href="../css/vueCommon.css" type="text/css">
</head>
<body>
<div id="app" class="app-container" v-loading.lock="loading.body" v-cloak>
    <template v-cloak>
        <el-form :inline="true" class="demo-form-inline filter-container head-form" size="mini" label-width="100px"
                 ref="query_form" :rules="rules_query" :model="queryData">
            <keepercloud-head-form :column_config.sync="columnConfig" :item.sync="item" :query_data.sync="queryData"
                                   v-for="(item,index) in columnConfig" :key="item.field"></keepercloud-head-form>
            <br>
            <!--            传入查询条件[queryData] 和 分页条件[tableConfig]（默认条件请查询对应js）-->
            <keepercloud-head-button ref="query_button" :query_data.sync="queryData" :loading.sync="loading"
                                     :key_field.sync="keyField"
                                     :url_config.sync="urlConfig"
                                     :table_config.sync="tableConfig"
                                     :column_config.sync="columnConfig"
                                     :local_storage_name.sync="localStorageName"
                                     :table_data.sync="tableData">
            </keepercloud-head-button>
            <!--            <el-button class="filter-item" type="primary" icon="el-icon-document-add" size="mini" @click="testBtn">
                            添加自定义按钮
                        </el-button>-->
        </el-form>
    </template>
    <div>
        <el-table size="small" v-loading="loading.table"
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  @row-click="clickRow"
                  :border="false"
                  style="width: 100%">
            <keepercloud-table-data :column_config.sync="columnConfig"></keepercloud-table-data>
            <el-table-column label="操作" fixed="right" min-width="100px">

                <template slot-scope="scope">
                    <el-button
                            size="mini" icon="el-icon-edit-outline"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini" type="danger" icon="el-icon-document-remove"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <keepercloud-table-pagination :query_data.sync="queryData"
                                      :table_config.sync="tableConfig"
                                      :table_data.sync="tableData"
                                      @query="queryBtn()">
        </keepercloud-table-pagination>
    </div>

    <div class="dialog" v-cloak>
        <el-dialog title="新增" :visible.sync="loading.insert" size="mini" width="660px">
            <el-form :model="insertData">
                <el-form :model="insertData" :rules="rules_insert" ref="form_insert" label-width="120px"
                         class="insertForm">
                    <keepercloud-form-data :column_config.sync="columnConfig" :item.sync="item" :show.sync="item.show.insert"
                                             :form_data.sync="insertData"
                                             v-for="(item,index) in columnConfig"
                                             :key="item.field"></keepercloud-form-data>
                </el-form>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="loading.insert = false">取 消</el-button>
                <el-button type="primary" @click="insertStep()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="loading.edit" size="mini" width="660px">
            <el-form :model="editData" :rules="rules_edit" ref="form_edit" label-width="120px" class="insertForm">
                <keepercloud-form-data :column_config.sync="columnConfig" :item.sync="item" :form_data.sync="editData"
                                       :show.sync="item.show.edit"
                                         v-for="(item,index) in columnConfig"
                                         :key="item.field"></keepercloud-form-data>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form_edit'); loading.edit = false">取 消</el-button>
                <el-button type="primary" @click="editStep()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</div>
<!-- 引入组件库 -->
<script src="../libs/axios.js"></script>
<script type="text/javascript" src="../libs/vue.js"></script>
<script src="../plugins/elementui/2.10.1/index.min.js"></script>
<script type="text/javascript" src="../plugins/requirejs/require.js"></script>
<script type="text/javascript" src="../js/vueCommon.js"></script>
<script type="text/javascript">
    let vue = new Vue({
        el: "#app",
        components: {
            'keepercloud-head-form': function (resolve) {
                // 用于展示头部查询框
                require(['../js/headForm.js'], resolve);
            },
            'keepercloud-head-button': function (resolve) {
                // 用于展示头部操作按钮
                require(['../js/headButton.js'], resolve);
            },
            'keepercloud-table-data': function (resolve) {
                // 用于展示表格数据
                require(['../js/tableData.js'], resolve);
            },
            'keepercloud-table-pagination': function (resolve) {
                // 用于展示表格分页工具栏
                require(['../js/tablePagination.js'], resolve);
            },
            'keepercloud-form-data': function (resolve) {
                // 用于展示表格分页工具栏
                require(['../js/formData.js'], resolve);
            }
        },
        data() {
            return {
                numberValidateForm: {
                    age: ''
                },
                loading: {
                    body: true,
                    table: false,
                    insert: false,
                    edit: false,
                },
                tableConfig: {}, // 分页条件, 所有初始化均在 headButton.js 和 tablePagination.js 完成, 也可手动修改默认值
                urlConfig: { // 配置查询,新增,修改,删除,批量删除,导出的 url 路径,不填则localStorageName生效
                    // query: "/tAdmissionScoreController/vueDataList",
                    // delete: "/tAdmissionScoreController?doBatchDel"
                },
                localStorageName: "testData",// 可以在 created 中初始化该变量, 读取资料从 localStorage 中读取, 当url为空时生效
                keyField: "id", //主键, 通常用于删除
                queryData: { // 查询条件, 如果里面有内容, 则进行默认值设置
                    // "sex": 1,// 设置查询时的默认值
                },
                insertData: { // 插入内容, 同查询条件, 如果里面有内容, 则进行默认值设置
                    // birthday:"2018-01",
                },
                editData: {}, // 编辑内容, 同查询条件, 不推荐设置默认值
                tableData: [], // 放 table 资料的容器
                columnConfig: [ // 配置页面显示的内容
                    {
                        title: "主键", // 字段中文
                        field: "id", // 数据库字段名
                        type: "text", //字段类型text,select,date(year, month, week),time,datetime,dateRange,timeRange
                        show: {
                            query: false, // 是否在查询条件展示, 以下都是默认 false 不展示
                            table: false, // 是否在表格中展示, 以下都是默认 false 不展示
                            insert: false, // 是否在新增页面展示, 以下都是默认 false 不展示
                            edit: false // 是否在修改页面展示, 以下都是默认 false 不展示
                        },
                        // width: "120", // 该字段在表格中的长度
                    }, {
                        title: "姓名",
                        field: "name",
                        type: "text",
                        show: {
                            query: true,
                            table: true,
                            insert: true,
                            edit: true
                        },
                    }, {
                        title: "性别",
                        field: "sex",
                        type: "select",
                        show: {
                            query: true,
                            table: true,
                            insert: true,
                            edit: true
                        },
                        options: [ //下拉框显示, 将会同步更新表格内的显示
                            {
                                value: 1,
                                label: '男'
                            }, {
                                value: 0,
                                label: '女'
                            }
                        ],
                    }, {
                        title: "出生年月",
                        field: "birthday",
                        type: "month",
                        show: {
                            query: true,
                            table: true,
                            insert: true,
                            edit: true
                        },
                        queryMode: "group", //只有以下几个选项可以在查询时变更为时间范围: date, month, datetime
                    }, {
                        title: "户籍所在地",
                        field: "birthLocation",
                        type: "select",
                        show: {
                            query: true,
                            table: true,
                            insert: true,
                            edit: true
                        },
                        options: [], // 这个必填, 不然资料加载不出来
                        optionUrl: "/getProvince",
                    }, {
                        title: "创建人登录名称",
                        field: "createBy",
                        type: "text",
                        show: {
                            table: true,
                        },
                    }, {
                        title: "创建人名称",
                        field: "createName",
                        type: "text",
                        show: {
                            table: true,
                        },
                    }, {
                        title: "创建时间",
                        field: "createTime",
                        type: "datetime",
                        show: {
                            table: true,
                        },
                    }, {
                        title: "修改人登录名称",
                        field: "updateBy",
                        type: "text",
                        show: {
                            table: true,
                        },
                    }, {
                        title: "修改人名称",
                        field: "updateName",
                        type: "text",
                        show: {
                            table: true,
                        },
                    }, {
                        title: "修改时间",
                        field: "updateTime",
                        type: "datetime",
                        show: {
                            table: true,
                        },
                    },
                ],
                // 校验规则: 分别对应了3个表单: 查询表单(rules_query)/新增页面表单(rules_insert)/修改页面表单(rules_edit)
                rules_query: {
                    name: [
                        {required: false, message: '请输入姓名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change'}
                    ],
                },
                rules_insert: {},
                rules_edit: {}
            }
        },
        methods: {
            queryBtn() {
                this.$refs.query_button.query()
            },
            handleEdit(index, row) {
                this.editData = JSON.parse(JSON.stringify(row));
                this.loading.edit = true;
            },
            handleDelete(index, row) {
                this.$refs.query_button.deleteData(row[this.keyField]);
                console.log(index, row);
            },
            testBtn() {

            },
            clickRow(row, column, event) {
                // 单击行时, 反选当前行
                if (column.label !== "操作") {
                    this.$refs.multipleTable.toggleRowSelection(row);
                }
                console.log(row, column, event);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            insertStep (){
                let self = this;
                // 新增操作
                let localData = localStorage.getItem(self.localStorageName);
                localData = JSON.parse(localData) || [];
                let insertData = this.insertData;
                insertData[self.keyField] = UUID();
                insertData.createBy = "tester";
                insertData.createName = "测试员";
                insertData.createTime = new Date();
                localData.push(insertData);
                localStorage.setItem(self.localStorageName, JSON.stringify(localData));
                self.queryBtn();
                showTip(self, '', '新增成功', "success");
                self.loading.insert = false;
            },
            editStep () {
                let self = this;
                // 新增操作
                let keyValue = self.editData[self.keyField];
                let localData = localStorage.getItem(self.localStorageName);
                localData = JSON.parse(localData);
                localData.forEach((current, index, arrs) => {
                   if (current[self.keyField] === keyValue) {
                       Object.assign(current, self.editData); // 原对象也会改变
                       current.updateBy = "tester2";
                       current.updateName = "测试员2";
                       current.updateTime = new Date();
                   }
                });
                localStorage.setItem(self.localStorageName, JSON.stringify(localData));
                self.queryBtn();
                showTip(self, '', '修改成功', "success");
                self.loading.edit = false;
            }
        },
        created: function () {
            // 如果需要使用本地数据, 请在此处设置默认值, 否则放空
            setDefaultValue(this, this.columnConfig, this.loading);
            let item = localStorage.getItem(this.localStorageName);
            item = JSON.parse(item);
            if (isEmpty(item)) {
                item = [];
                for (let i = 0; i < 13; i++) {
                    item.push({
                        id: UUID(),
                        name: "张三",
                        sex: 1,
                        birthLocation: "hn",
                    });
                    item.push({
                        id: UUID(),
                        name: "李四",
                        sex: 1,
                        birthLocation: "bj",
                    });
                    item.push({
                        id: UUID(),
                        name: "王舞",
                        sex: 0,
                        birthLocation: "bj",
                    });
                }
            }
            localStorage.setItem(this.localStorageName, JSON.stringify(item));
        }
    });
</script>
</body>
</html>
